<template>
  <div class="collection">
    <div class="histoy-top">
      <div>历史记录</div>
      <div>
        <span @click="deleXuan">删除已选中</span>
        <span @click="deleAll">删除全部</span>
      </div>
    </div>

    <div class="history-all">
      <ul>
        <li v-for="(item, index) in historyList" :key="index">
          <div class="histoyr-itme">
            <div>
              <input
                type="checkbox"
                v-model="item.cgId"
                @click="deleMore(item.hid)"
              />
            </div>

            <div class="history-img">
              <img :src="item.giBackdrop" alt="" @click="goGame(item.giId)" />
            </div>
            <div class="hisory-right">
              <div class="history-text">
                <div>
                  <span @click="goGame(item.giId)">{{ item.giName }}</span>
                </div>
                <div v-html="item.giTitle"></div>
                <div>{{ item.htime }}</div>
              </div>

              <div class="history-dele" @click="deleItem(item.hid)">
                <img src="../../../assets/img/dele .svg" alt="" />
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {
  history,
  deleteHistory,
  deleteMoreUserIdHistory,
  deleteUserIdHistory,
} from "../../../network/usermes";

export default {
  name: "Hisorys",
  data() {
    return {
      historyList: [],
      pages: 1,
      page: "",
      check: "",
      deleList: [],
    };
  },
  created() {
    this.getHistory();
  },
  mounted() {
    window.addEventListener("scroll", this.scrollNav);
  },

  methods: {
    getHistory() {
      history(this.pages, this.$Cookie.get("userid")).then((res) => {
        this.page = res.data.data.pages;
        if (this.pages > this.page) {
          console.log(this.pages);
        } else {
          this.pages++;
          this.historyList.push(...res.data.data.list);
        }
      });
    },

    scrollNav() {
      let bottom =
        document.documentElement.scrollHeight -
        document.documentElement.scrollTop -
        document.documentElement.clientHeight;
      if (bottom < 150 && this.pages <= this.page) {
        this.getHistory();
      }
    },

    deleItem(hid) {
      this.$confirm("是否删除此记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteHistory(hid).then((res) => {
            console.log(res);
            for (let i = 0; i < this.historyList.length; i++) {
              if (this.historyList[i]["hid"] == hid) {
                console.log(i);
                this.historyList.splice(i, 1);
              }
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 1000,
          });
        });
    },

    deleMore(hid) {
      if (event.target.checked) {
        this.deleList.push(hid);
      } else {
        for (let i = 0; i < this.deleList.length; i++) {
          if (this.deleList[i] == hid) {
            console.log(i);
            this.deleList.splice(i, 1);
          }
        }
      }
    },

    deleXuan() {
      this.$confirm("是否删除已选中?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteMoreUserIdHistory(this.deleList.toString()).then((res) => {
            for (let i = 0; i < this.deleList.length; i++) {
              for (let j = 0; j < this.historyList.length; j++) {
                if (this.historyList[j]["hid"] === this.deleList[i]) {
                  this.historyList.splice(j, 1);
                  console.log(this.deleList[j], this.deleList);
                }
              }
            }

            this.deleList = [];
            console.log(res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 1000,
          });
        });
    },

    deleAll() {
      this.$confirm("是否删除所有记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUserIdHistory(this.$Cookie.get("userid")).then((res) => {
            this.historyList = [];
            this.getHistory;
            console.log(res);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 1000,
          });
        });
    },

    goGame(id) {
      this.$router.push({ name: "详情", params: { id: id } });
    },
  },
};
</script>

<style>
.histoy-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.25rem;
  border-bottom: 1px solid rgb(187, 185, 184);
  padding-bottom: 0.1rem;
}

.histoy-top div:nth-child(1) {
  font-size: 0.15rem;
}

.histoy-top div:nth-child(2) span {
  font-size: 0.08rem;
  border: 1px solid rgb(36, 184, 242);
  padding: 0.03rem 0.05rem 0.03rem 0.05rem;
  cursor: pointer;
  border-radius: 8%;
  color: rgb(36, 184, 242);
}

.histoy-top div:nth-child(2) span:hover {
  background-color: rgb(36, 184, 242);
  color: #fff;
}

.histoy-top div:nth-child(2) span:nth-child(1) {
  margin-right: 0.15rem;
}

.history-all ul {
  list-style: none;
  margin-bottom: 0.8rem;
}

.histoyr-itme {
  display: flex;
  align-items: center;
  margin-top: 0.15rem;
}

.histoyr-itme input {
  width: 0.1rem;
  height: 0.1rem;
  margin-right: 0.15rem;
}

.hisory-right {
  display: flex;
  align-items: center;
  padding-bottom: 0.2rem;
  margin-left: 0.15rem;
  border-bottom: 1px solid rgb(197, 197, 197);
}

.history-img {
  width: 1.5rem;
  height: 0.8rem;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}

.history-img img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.5s;
}

.history-img img:hover {
  transform: scale(1.1);
}

.history-text {
  width: 5.5rem;
}

.history-text div:nth-child(1) span {
  font-size: 0.12rem;
  cursor: pointer;
}

.history-text div:nth-child(1) span:hover {
  color: rgb(36, 184, 242);
}

.history-text div:nth-child(2) {
  height: 25%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 0.08rem;
  margin-bottom: 0.12rem;
}

.history-text div:nth-child(3) {
  font-size: 0.08rem;
}

.history-dele {
  width: 0.2rem;
  padding-left: 0.3rem;
}

.history-dele img {
  width: 60%;
  cursor: pointer;
}
</style>